<template>
  <div class="table">
    <el-table
      class="customer-table"
      :data="listdata"
      style="width: 3756px; font-size: 32px"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        prop="id"
        label="序号"
        sortable
        class="width1"
        width="94"
      >
      </el-table-column>
      <el-table-column
        prop="eventname"
        label="告警名称"
        sortable
        class="width2"
      >
      </el-table-column>
      <el-table-column prop="happenTime" label="时间" class="width3">
      </el-table-column>
      <el-table-column prop="address" label="告警地点" class="width4">
      </el-table-column>
      <el-table-column prop="eventlvl" label="告警等级" sortable class="width5">
        <template slot-scope="scope">
          <span v-if="scope.row.eventlvl === 1" style="color: #facc14"
            >中风险</span
          >
          <span v-else-if="scope.row.eventlvl === 0" style="color: #ff7f4d"
            >低风险</span
          >
          <span v-else-if="scope.row.eventlvl === 2" style="color: #ef4864"
            >高风险</span
          >
          <span v-else style="color: #3196fa">一般</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" sortable class="width6">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 1" style="color: #3196fa"
            >处理中</span
          >
          <span v-else-if="scope.row.status === 2" style="color: #2fc25b"
            >已处理</span
          >
          <span v-else style="color: #ef4864">未处理</span>
        </template>
      </el-table-column>
      <el-table-column label="预览" class="width7">
        <template slot-scope="scope">
          <div class="data_imgs">
            <div class="data_img">
              <img
                @click="lookimgs(scope.row)"
                src="../../assets/img/icon/alarmCenter/照片.gif"
                alt=""
              />
            </div>
            <div class="zhanWei"></div>
            <div class="data_img">
              <img
                @click="lookvideo(scope.row)"
                src="../../assets/img/icon/alarmCenter/视频.gif"
                alt=""
              />
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" class="width8">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >处理</el-button
          >
          <!-- <el-button type="text" size="small">历史记录员</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 展示图片 -->
    <div class="ingeurl" v-if="isimgeurl">
      <img :src="imageurl" alt="" />
    </div>
    <!-- 分页 -->
    <div class="bottom">
      <div class="bottom_left">
        <div class="bottom_left_span">
          每页8条数据,共<span>{{ sumlistdata }}</span
          >条
        </div>
      </div>
      <div class="bottom_right">
        <div class="bottom_left_pagination">
          <el-pagination
            layout="prev, pager, next"
            @current-change="current_change"
            :total="sumlistdata"
            prev-text="上一页"
            next-text="下一页"
            class="page"
            :page-size="pagesize"
            :pager-count="5"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.table {
  width: 3756px;
  height: 1032px;
  margin: auto;
  background: rgba(0, 42, 82, 0.7);
  position: absolute;
}
/deep/.table .el-table {
  color: #fff;
}
/deep/.el-table__empty-text {
  line-height: normal;
  font-size: 32px;
}
/*最外层透明*/
/deep/ .el-table,
/deep/ .el-table__expanded-cell {
  background-color: transparent;
}
/* 表格内 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  text-align: center;
  height: 92px;
  margin: 0;
  padding: 0;
  font-size: 32px;
  background-color: transparent;
  color: #ffffff;
}
/deep/.el-table .cell {
  line-height: 92px;
  font-size: 32px;
  height: 92px;
}
// 表格头部排序图标
/deep/.el-table .caret-wrapper {
  margin-left: 15px;
  height: 46px;
}
/deep/.el-table .sort-caret {
  width: 16px;
}
/* 表格表头 */
/deep/.el-table thead {
  font-size: 32px;
  height: 124px;
  color: #ffffff;
  font-weight: 500;
  &.cell {
    height: 124px;
  }
}
/deep/ .el-table td,
.el-table .el-table th.is-leaf,
.el-table .el-table--border,
.el-table .el-table--group {
  border: none;
  cursor: pointer;
}
/deep/.el-table .el-table .el-table::before {
  height: 0;
}
// // 去掉表格单元格边框
/deep/.customer-table th {
  border: none;
}
/deep/.customer-table::before {
  width: 0;
}
/deep/.customer-table .el-table__fixed-right::before,
.el-table__fixed::before {
  width: 0;
}
.el-table {
  /deep/tbody tr {
    align-items: center;
  }
  /deep/tbody tr:hover > td {
    background: rgba(0, 42, 82, 0.7);
  }
  /deep/tbody tr:nth-child(odd) {
    background: rgba(6, 54, 100, 0.7);
  }
}
// 避免内联样式不能自适应
// /deep/.customer-table {
//   .width1 {
//     width: 97px;
//   }
//   .width2 {
//     width: 430px;
//   }
//   .width3 {
//     width: 479px;
//   }
//   .width4 {
//     width: 905px;
//   }
//   .width5 {
//     width: 462px;
//   }
//   .width6 {
//     width: 465px;
//   }
//   .width7 {
//     width: 394px;
//   }
//   .width8 {
//     width: 429px;
//   }
// }
// 分页
.page /deep/ button,
.page /deep/ .el-pager .number,
.page /deep/ .el-pager .more {
  background: rgb(2, 72, 142);
  color: #fff;
  width: 120px;
  text-align: center;
  padding: 0;
  height: 50px;
}
.page /deep/ .el-pager .number,
.page /deep/ .el-pager .more {
  width: 60px;
  height: 50px;
  line-height: 50px;
  margin: 0 10px;
}
.page /deep/ .el-pager .number.active {
  background: rgb(49, 150, 250);
}
.bottom {
  position: absolute;
  bottom: 52px;
  height: 111px;
  width: 3756px;
  align-items: center;
  display: flex;
}
.bottom_left {
  margin-left: 2522px;
  height: 111px;
  color: #3196fa;
  font-weight: bold;
  width: 405px;
  font-size: 28px;
}
.bottom_left_span {
  line-height: 114px;
}
.bottom_right {
  line-height: 117px;
  width: 700px;
  align-items: center;
}
.bottom_left_pagination {
  height: 48px;
}
// 行内图标
.data_imgs {
  height: 92px;
  font-size: 32px;
  align-items: center;
  display: flex;
  justify-content: center;
}
// 弹出显示的图片
.ingeurl {
  background-color: #fff;
  bottom: 350px;
  right: 1000px;
  height: 400px;
  width: 550px;
  position: absolute;
}
.data_img {
  line-height: 42px;
  width: 47px;
  height: 40px;
}
.zhanWei {
  width: 42px;
}
img {
  width: 100%;
  height: 100%;
}
</style>
<script>
import API, { alamCenterApi } from "@/api";
export default {
  name: 'BottomData',
  async created () {
    this.getlistdata()
    this.total = parseInt(this.listdata.length)
  },
  mounted () {},
  methods: {
    // 分页显示数据
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 0) {
        return "th"
      }
      return ""
    },
    switchChange() {
      this.istag = !this.istag;
    },
    current_change(currentPage) {
      this.currentPage = currentPage;
      this.getlistdata();
    },
    lookvideo(row) {
      // 查看视频
      this.$emit("sendvideo", row);
    },
    lookimgs(row) {
      //查看图片
      this.imageurl = row.imageurl;
      console.log(this.imageurl);
      this.isimgeurl = !this.isimgeurl;
    },
    // 处理
    async handleClick(row, showModal = true) {
      if (row.status === 2) {
        this.$message({
          message: "已经处理过了",
          type: "error",
        })
        return
      }
      let confirm = ''
      if (row.eventlvl === 2 && showModal) {
        confirm = await this.$alert(`<div class="form-item">
          <div class="label">分组名称:</div>
          <input class="checkbox" type="checkbox" checked disabled>领导组</input>
        </div>
        <div class="form-item">
          <input class="checkbox" type="checkbox" checked disabled>通知分组成员</input>
        </div>
        `, '处理确认', {
          dangerouslyUseHTMLString: true
        })
      }
      const id = row.id
      await API(alamCenterApi.GJ_STATUS, {
        id: id,
        status: 1
      })
      this.$message({
        message: "处理成功",
        type: "success",
      })
      this.getlistdata()
      if (confirm === 'confirm') {
        API(alamCenterApi.SEND_MSG, {
          groupId: 1,
          msg: `${row.address} 发生报警，请尽快前往处理`
        })
      }
    },
    // 获取告警列表
    async getlistdata() {
      const GJlist = await API(alamCenterApi.GJ_LIST, {
        pageNo: `${this.currentPage}`,
        pageSize: 8,
      });
      this.listdata = GJlist.data.records;
      this.sumlistdata = GJlist.data.total;
      // this.pagecount = Math.ceil(this.sumlistdata/8)
      // console.log(this.pagecount)
      console.log(this.listdata);
    },
  },
  data () {
    return {
      total: 0, // 默认数据总数
      pagesize: 8, // 每页的数据条数
      currentPage: 1, // 默认开始页面
      sumlistdata: 0, // 总数据条数
      pagercount: 4,
      // pagecount:0,//总分页条数
      imageurl: '',
      isimgeurl: false,
      listdata: [] // 数据
    }
  }
};
</script>
